Two items visible: 'Apple' and 'Apricot' with 'ap' highlighted in accent color
Overlay : Expected + Actual
Ap
ple
Ap
ricot
Ap
ple
Ap
ricot
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Ap
ricot
Only 'Apple' visible (exact case match), lowercase 'apple' and uppercase 'APPLE' filtered out
Snapshot (no differences to highlight)
Apple
One item visible: 'JavaScript' with fuzzy-matched characters 'J', 'S', 'c' highlighted
Overlay : Expected + Actual
J
ava
Sc
ript
J
ava
Sc
ript
Actual opacity:
50%
Snapshot (no differences to highlight)
J
ava
Sc
ript
Empty list - no items match the query 'xyz'
Snapshot (no differences to highlight)
All three items visible - empty query shows unfiltered list
Expected
Apple
Banana
Cherry
Actual
Apple
Banana
Cherry
Overlay : Expected + Actual
Apple
Banana
Cherry
Apple
Banana
Cherry
Actual opacity:
50%
Snapshot (no differences to highlight)
Apple
Banana
Cherry
Two filtered items with cursor (▶) on 'Apple', both showing 'ap' highlighted
Overlay : Expected + Actual
Ap
ple
Ap
ricot
Ap
ple
Ap
ricot
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Ap
ricot
Only 'First (100)' visible - custom matcher filters by Name field only
Overlay : Expected + Actual
▶
First
(100)
▶
First
(100)
Actual opacity:
50%
Snapshot (no differences to highlight)
▶
First
(100)
Two items with 'ap' highlighted in accent color with underline on both 'Apple' and 'Apricot'
Expected
Ap
ple
Pie
Ap
ricot
Tart
Actual
Ap
ple
Pie
Ap
ricot
Tart
Overlay : Expected + Actual
Ap
ple
Pie
Ap
ricot
Tart
Ap
ple
Pie
Ap
ricot
Tart
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Pie
Ap
ricot
Tart
Two rows visible: Alice and Charlie, both with 'Engineer' highlighted in the role column
Expected
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual
Alice
Engineer
NYC
Charlie
Engineer
SF
Overlay : Expected + Actual
Alice
Engineer
NYC
Charlie
Engineer
SF
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
NYC
Charlie
Engineer
SF
Only first row visible with 'Alice' highlighted - case-sensitive match excludes 'ALICE' row
Expected
Alice
alice@example.com
Actual
Alice
alice@example.com
Overlay : Expected + Actual
Alice
alice@example.com
Alice
alice@example.com
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
alice@example.com
One row visible: 'JavaScript' with fuzzy-matched characters 'J', 'S', 'c' highlighted
Expected
J
ava
Sc
ript
Frontend
Actual
J
ava
Sc
ript
Frontend
Overlay : Expected + Actual
J
ava
Sc
ript
Frontend
J
ava
Sc
ript
Frontend
Actual opacity:
50%
Snapshot (no differences to highlight)
J
ava
Sc
ript
Frontend
Empty table - no rows match the query 'xyz'
Snapshot (no differences to highlight)
All three rows visible - empty query shows unfiltered table
Expected
Alice
Engineer
Bob
Designer
Charlie
Manager
Actual
Alice
Engineer
Bob
Designer
Charlie
Manager
Overlay : Expected + Actual
Alice
Engineer
Bob
Designer
Charlie
Manager
Alice
Engineer
Bob
Designer
Charlie
Manager
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
Bob
Designer
Charlie
Manager
Two filtered rows with Alice row highlighted (active), both showing 'Engineer' with match highlighting
Expected
Alice
Engineer
Charlie
Engineer
Actual
Alice
Engineer
Charlie
Engineer
Overlay : Expected + Actual
Alice
Engineer
Charlie
Engineer
Alice
Engineer
Charlie
Engineer
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
Charlie
Engineer
Header row visible (Name, Role, City) followed by two filtered data rows with 'Engineer' highlighted
Expected
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Overlay : Expected + Actual
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual opacity:
50%
Snapshot (no differences to highlight)
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Only Alice row visible - custom renderer shows plain text without highlighting
Snapshot (no differences to highlight)
Alice
30
Two rows visible with 'ap' highlighted in accent color in first column of each row
Expected
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Actual
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Overlay : Expected + Actual
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Two items visible with all occurrences of 'apple' highlighted (3x in first item, 1x in second)
Expected
apple
apple
apple
apple
pie
Actual
apple
apple
apple
apple
pie
Overlay : Expected + Actual
apple
apple
apple
apple
pie
apple
apple
apple
apple
pie
Actual opacity:
50%
Snapshot (no differences to highlight)
apple
apple
apple
apple
pie
Two rows visible: Alice (NYC in city column) and NYC Admin (NYC in both name and city columns)
Expected
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Actual
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Overlay : Expected + Actual
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
White 'Hello, World!!' text at top-left. Width auto-sized to 14 characters.
Overlay : Expected + Actual
Hello,
World!!
Hello,
World!!
Actual opacity:
50%
Snapshot (no differences to highlight)
Hello,
World!!
Rich text: 'Bold' in bold, ' and ' in normal, 'Italic' in italic. All white on black, single line.
Overlay : Expected + Actual
Bold
and
Italic
Bold
and
Italic
Actual opacity:
50%
Snapshot (no differences to highlight)
Bold
and
Italic
Long text extends beyond 20-cell boundary, no wrapping. Only first 20 characters visible: 'This is a very long '.
Expected
This
is
a
very
long
Actual
This
is
a
very
long
Overlay : Expected + Actual
This
is
a
very
long
This
is
a
very
long
Actual opacity:
50%
Snapshot (no differences to highlight)
This
is
a
very
long
Text wraps at word boundaries within 15-cell width. Multiple lines, words not broken mid-word.
Expected
This
is
a
line
that
should
wrap
at
word
boundaries
Actual
This
is
a
line
that
should
wrap
at
word
boundaries
Overlay : Expected + Actual
This
is
a
line
that
should
wrap
at
word
boundaries
This
is
a
line
that
should
wrap
at
word
boundaries
Actual opacity:
50%
Snapshot (no differences to highlight)
This
is
a
line
that
should
wrap
at
word
boundaries
Long word broken at exactly 10 characters per line. Word split mid-character across multiple lines.
Expected
Supercalif
ragilistic
expialidoc
ious
Actual
Supercalif
ragilistic
expialidoc
ious
Overlay : Expected + Actual
Supercalif
ragilistic
expialidoc
ious
Supercalif
ragilistic
expialidoc
ious
Actual opacity:
50%
Snapshot (no differences to highlight)
Supercalif
ragilistic
expialidoc
ious
Three text rows showing style variations. 'Bold' in bold on row 1, 'Italic' in italic on row 2, 'Underline' underlined on row 3.
Expected
Bold
Italic
Underline
Actual
Bold
Italic
Underline
Overlay : Expected + Actual
Bold
Italic
Underline
Bold
Italic
Underline
Actual opacity:
50%
Snapshot (no differences to highlight)
Bold
Italic
Underline
White 'Highlighted' text on purple/blue background. Background extends to text width only.
Snapshot (no differences to highlight)
Highlighted
Three lines of text from explicit newlines. 'Line 1' on row 1, 'Line 2' on row 2, 'Line 3' on row 3.
Expected
Line
1
Line
2
Line
3
Actual
Line
1
Line
2
Line
3
Overlay : Expected + Actual
Line
1
Line
2
Line
3
Line
1
Line
2
Line
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Line
1
Line
2
Line
3
Red/pink 'Colored' text on black background. Text color is RGB(255,100,100).
Snapshot (no differences to highlight)
Colored
Button with 'Click Me' label. Default styling, width auto-sized to label.
Snapshot (no differences to highlight)
Click
Me
Button with 'Styled' label. White text on purple background (RGB 100,50,150).
Snapshot (no differences to highlight)
Styled
Button 'Wide' with fixed 15-cell width. Label centered within the button area.
Snapshot (no differences to highlight)
Wide
List with 3 items vertically stacked. First item 'Item 1' is active (highlighted). Items 2 and 3 below.
Expected
Item
1
Item
2
Item
3
Actual
Item
1
Item
2
Item
3
Overlay : Expected + Actual
Item
1
Item
2
Item
3
Item
1
Item
2
Item
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Item
1
Item
2
Item
3
List with 3 items. 'Second' (index 1) is active and highlighted. 'First' above, 'Third' below.
Expected
First
Second
Third
Actual
First
Second
Third
Overlay : Expected + Actual
First
Second
Third
First
Second
Third
Actual opacity:
50%
Snapshot (no differences to highlight)
First
Second
Third
Empty list with no items. Should render as empty space with no visible content.
Snapshot (no differences to highlight)
List with custom render showing checkboxes. '[*] A' active on row 1, '[ ] B' and '[ ] C' below.
Expected
[*]
A
[
]
B
[
]
C
Overlay : Expected + Actual
[*]
A
[
]
B
[
]
C
[*]
A
[
]
B
[
]
C
Actual opacity:
50%
Snapshot (no differences to highlight)
[*]
A
[
]
B
[
]
C
Multi-select list with items 0 and 2 selected. 'Option 1' and 'Option 3' shown as selected, 'Option 2' unselected.
Expected
Option
1
Option
2
Option
3
Actual
Option
1
Option
2
Option
3
Overlay : Expected + Actual
Option
1
Option
2
Option
3
Option
1
Option
2
Option
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Option
1
Option
2
Option
3
20-cell progress bar at 0%. Entire bar shows unfilled/empty state.
Snapshot (no differences to highlight)
20-cell progress bar at 50%. Left 10 cells filled, right 10 cells unfilled.
Snapshot (no differences to highlight)
██████████
20-cell progress bar at 100%. Entire bar shows filled state.
Expected
████████████████████
Actual
████████████████████
Overlay : Expected + Actual
████████████████████
████████████████████
Actual opacity:
50%
Snapshot (no differences to highlight)
████████████████████
20-cell progress bar at 75%. Green filled portion (15 cells), dark gray unfilled (5 cells).
Overlay : Expected + Actual
███████████████
███████████████
Actual opacity:
50%
Snapshot (no differences to highlight)
███████████████
20-cell progress bar at 25%. Left 5 cells filled, right 15 cells unfilled.
Snapshot (no differences to highlight)
█████
30-cell row with 'Left' at column 1 and 'Right' at far right. Spacer fills gap between them.
Snapshot (no differences to highlight)
Left
Right
Row with 'A' at column 1, 5-cell fixed gap, then 'B' at column 7. Total width is 7 cells.
Snapshot (no differences to highlight)
A
B
10-row column with 'Top' at row 1 and 'Bottom' at row 10. Spacer fills 8 rows between them.
Snapshot (no differences to highlight)
Top
Bottom
40-cell row with 'A', 'B', 'C' evenly distributed. Two spacers split remaining space equally.
Snapshot (no differences to highlight)
A
B
C
Column with 'Visible' on row 1 (shown because condition is true), 'Always' on row 2.
Overlay : Expected + Actual
Visible
Always
Visible
Always
Actual opacity:
50%
Snapshot (no differences to highlight)
Visible
Always
Column with only 'Always' on row 1. 'Hidden' is removed (condition false), takes no space.
Snapshot (no differences to highlight)
Always
Column with only 'Always' on row 1. 'Hidden' is removed (hide condition true), takes no space.
Snapshot (no differences to highlight)
Always
Column with 'Visible' on row 1 (shown because hide condition is false), 'Always' on row 2.
Overlay : Expected + Actual
Visible
Always
Visible
Always
Actual opacity:
50%
Snapshot (no differences to highlight)
Visible
Always
Only 'Page One' visible (active key is 'page1'). 'Page Two' not rendered.
Snapshot (no differences to highlight)
Page
One
Only 'Second' visible (active key is 'page2'). 'First' and 'Third' not rendered.
Snapshot (no differences to highlight)
Second
Empty/no content visible. Active key 'nonexistent' doesn't match any child key.
Snapshot (no differences to highlight)
Three text items stacked vertically at top-left. Red 'First' on row 1, green 'Second' on row 2, blue 'Third' on row 3. Each sized to content width.
Expected
First
Second
Third
Actual
First
Second
Third
Overlay : Expected + Actual
First
Second
Third
First
Second
Third
Actual opacity:
50%
Snapshot (no differences to highlight)
First
Second
Third
Blue 'Top' text at row 1 (top edge). Column is 10 rows tall with empty space below the text.
Snapshot (no differences to highlight)
Top
Blue 'Centered' text vertically centered around row 5. Equal empty space above and below.
Snapshot (no differences to highlight)
Centered
Blue 'Bottom' text at row 10 (bottom edge). Column is 10 rows tall with empty space above the text.
Snapshot (no differences to highlight)
Bottom
Blue text background stretches full 20-cell width. Text 'Stretched' left-aligned within the stretched area.
Snapshot (no differences to highlight)
Stretched
Blue 'Left' text at left edge (column 1). Text width matches content, not stretched. Column is 20 cells wide.
Snapshot (no differences to highlight)
Left
Blue 'CenterH' text horizontally centered in 20-cell column. Equal empty space on left and right.
Snapshot (no differences to highlight)
CenterH
Blue 'Right' text at right edge of 20-cell column. Empty space on left, text aligned to column 20.
Snapshot (no differences to highlight)
Right
Three items stacked vertically with 2-row gaps. Red 'A' at row 1, green 'B' at row 4, blue 'C' at row 7.
Snapshot (no differences to highlight)
A
B
C
Gray outer column with two nested columns stacked. Red column with 'Nested1' on row 1, blue column with 'Nested2' on row 2.
Overlay : Expected + Actual
Nested1
Nested2
Nested1
Nested2
Actual opacity:
50%
Snapshot (no differences to highlight)
Nested1
Nested2
10-row column with mixed heights. Red 'Fixed' takes 2 rows, green 'Flex' expands to fill 7 rows, blue 'Auto' takes 1 row at bottom.
Overlay : Expected + Actual
Fixed
Flex
Auto
Fixed
Flex
Auto
Actual opacity:
50%
Snapshot (no differences to highlight)
Fixed
Flex
Auto
Three single-char items in a horizontal row. Red 'A' at column 1, green 'B' at column 2, blue 'C' at column 3. All on row 1.
Snapshot (no differences to highlight)
A
B
C
Blue 'Left' text at left edge (column 1). Row is 20 cells wide with empty space to the right.
Snapshot (no differences to highlight)
Left
Blue 'Mid' text horizontally centered in 20-cell row. Equal empty space on left and right.
Snapshot (no differences to highlight)
Mid
Blue 'Right' text at right edge of 20-cell row. Empty space on left, text ends at column 20.
Snapshot (no differences to highlight)
Right
Blue background stretches full 5-row height. Text 'Tall' at top within the stretched area.
Snapshot (no differences to highlight)
Tall
Blue 'Top' text at row 1 (top edge). Row is 5 rows tall, text height matches content.
Snapshot (no differences to highlight)
Top
Blue 'CenterV' text vertically centered in 5-row container. Equal empty space above and below.
Snapshot (no differences to highlight)
CenterV
Blue 'Bottom' text at row 5 (bottom edge). Empty space above the text.
Snapshot (no differences to highlight)
Bottom
Three items in horizontal row with 2-column gaps. Red 'X' at column 1, green 'Y' at column 4, blue 'Z' at column 7.
Snapshot (no differences to highlight)
X
Y
Z
Gray outer row with two nested rows side by side. Red row with 'Inner1' on left, blue row with 'Inner2' on right.
Overlay : Expected + Actual
Inner1
Inner2
Inner1
Inner2
Actual opacity:
50%
Snapshot (no differences to highlight)
Inner1
Inner2
30-cell row with mixed widths. Red 'Fixed' takes 5 columns, green 'Flex' expands to fill remaining space, blue 'Auto' sized to content.
Overlay : Expected + Actual
Fixed
Flex
Auto
Fixed
Flex
Auto
Actual opacity:
50%
Snapshot (no differences to highlight)
Fixed
Flex
Auto
Red 'Header' docked at top (row 1, full width). Blue 'Body' fills remaining space below.
Snapshot (no differences to highlight)
Header
Body
Red 'Footer' docked at bottom (row 10, full width). Blue 'Body' fills remaining space above.
Snapshot (no differences to highlight)
Body
Footer
Red 'Side' docked at left (full height). Blue 'Main' fills remaining space to the right.
Snapshot (no differences to highlight)
Side
Main
Red 'Aside' docked at right (full height). Blue 'Main' fills remaining space to the left.
Snapshot (no differences to highlight)
Main
Aside
All edges docked. Red top, orange bottom, green left, purple right. Blue 'Center' fills middle area.
Expected
Broken
Left
Center
Right
Bottom
Actual
Broken
Left
Center
Right
Bottom
Overlay : Expected + Actual
Broken
Left
Center
Right
Bottom
Broken
Left
Center
Right
Bottom
Actual opacity:
50%
Snapshot (no differences to highlight)
Broken
Left
Center
Right
Bottom
Red 'Header' takes 2 rows at top. Blue body with text fills remaining 8 rows.
Expected
Header
Content
fills
the
rest
Actual
Header
Content
fills
the
rest
Overlay : Expected + Actual
Header
Content
fills
the
rest
Header
Content
fills
the
rest
Actual opacity:
50%
Snapshot (no differences to highlight)
Header
Content
fills
the
rest
Two widgets docked at top: red 'Toolbar1' on row 1, orange 'Toolbar2' on row 2. Blue 'Content' below.
Expected
Toolbar1
Toolbar2
Content
Actual
Toolbar1
Toolbar2
Content
Overlay : Expected + Actual
Toolbar1
Toolbar2
Content
Toolbar1
Toolbar2
Content
Actual opacity:
50%
Snapshot (no differences to highlight)
Toolbar1
Toolbar2
Content
Blue text 'Auto sized' at top-left. Width automatically sized to 10 characters (content width).
Snapshot (no differences to highlight)
Auto
sized
Blue column exactly 10 cells wide by 5 cells tall. 'Fixed' text at top-left of column.
Snapshot (no differences to highlight)
Fixed
30-cell row split proportionally. Red '1' takes 10 cells (1/3), green '2' takes 20 cells (2/3).
Snapshot (no differences to highlight)
1
2
30-cell row. Red 'Fixed' takes exactly 10 cells. Green 'Flex' expands to fill remaining 20 cells.
Snapshot (no differences to highlight)
Fixed
Flex
10-row column split equally. Red row with 'Nested Flex' takes top 5 rows, blue row with 'Another Flex' takes bottom 5 rows.
Expected
Nested
Flex
Another
Flex
Actual
Nested
Flex
Another
Flex
Overlay : Expected + Actual
Nested
Flex
Another
Flex
Nested
Flex
Another
Flex
Actual opacity:
50%
Snapshot (no differences to highlight)
Nested
Flex
Another
Flex
Gray column containing red row on top, blue text below. Red row has 'Left' and 'Right' side by side.
Overlay : Expected + Actual
LeftRight
Below
LeftRight
Below
Actual opacity:
50%
Snapshot (no differences to highlight)
LeftRight
Below
Gray row containing red column on left, blue 'Beside' on right. Red column has 'Top' and 'Bottom' stacked.
Expected
Top
Beside
Bottom
Overlay : Expected + Actual
Top
Beside
Bottom
Top
Beside
Bottom
Actual opacity:
50%
Snapshot (no differences to highlight)
Top
Beside
Bottom
Dock with red header row containing 'Logo' and 'Menu'. Blue column body with 'Section1' and 'Section2' stacked below.
Expected
LogoMenu
Section1
Section2
Actual
LogoMenu
Section1
Section2
Overlay : Expected + Actual
LogoMenu
Section1
Section2
LogoMenu
Section1
Section2
Actual opacity:
50%
Snapshot (no differences to highlight)
LogoMenu
Section1
Section2
Gray 20x5 stack. Green 'Top' overlays red 'Bottom', both at top-left. Green fully covers red since they overlap at same position.
Snapshot (no differences to highlight)
Top
tom
Gray 25x6 stack with three overlapping layers. Blue 'Layer3-Top' visible on top, covering green and red beneath.
Overlay : Expected + Actual
Layer3-Top
k
Layer3-Top
k
Actual opacity:
50%
Snapshot (no differences to highlight)
Layer3-Top
k
Stack auto-sized to fit longest child. Green 'This is much longer' visible, red 'Short' hidden beneath. Stack width matches green text.
Expected
This
is
much
longer
Actual
This
is
much
longer
Overlay : Expected + Actual
This
is
much
longer
This
is
much
longer
Actual opacity:
50%
Snapshot (no differences to highlight)
This
is
much
longer
Gray 20x6 stack. Blue 'TopLeft' at top-left corner (row 1, column 1).
Snapshot (no differences to highlight)
TopLeft
Gray 20x6 stack. Blue 'Center' at center of stack, both horizontally and vertically.
Snapshot (no differences to highlight)
Center
Gray 20x6 stack. Blue 'BotRight' at bottom-right corner (row 6, right-aligned).
Snapshot (no differences to highlight)
BotRight
Gray 20x6 stack. Blue 'BotMid' at bottom, horizontally centered (row 6).
Snapshot (no differences to highlight)
BotMid
Gray 20x6 stack. Blue 'At 2,1' positioned at row 2 (1 from top), column 3 (2 from left).
Snapshot (no differences to highlight)
At
2,1
Gray 20x6 stack. Blue 'BotRight' positioned 1 row from bottom, 2 columns from right edge.
Snapshot (no differences to highlight)
BotRight
Gray 20x5 stack completely filled by blue background. Text 'Fills' at top-left, blue covers entire stack area.
Snapshot (no differences to highlight)
Fills
Gray 20x5 stack. Blue text at row 2, stretched horizontally with 2-cell margins on left and right (16 cells wide).
Snapshot (no differences to highlight)
Stretched
H
Gray 20x6 stack. Blue 'V' stretched vertically from row 2 to row 5 (4 rows), starting at column 3.
Snapshot (no differences to highlight)
V
Gray 15x5 stack with blue 'Base' at top-left. Red 'Badge' overflows stack bounds: 1 row above top, 2 columns right of stack edge.
Snapshot (no differences to highlight)
Base
Gray 10x3 stack. Blue text exceeds stack width, content overflows and is clipped at stack boundary.
Snapshot (no differences to highlight)
This
text
Gray 20x5 stack with layered content. Red 15x4 column at origin with 'Background' and 'Content'. Blue 12x3 'Overlay' partially covers red, offset to row 2, column 6.
Expected
Background
Conte
Overlay
Actual
Background
Conte
Overlay
Overlay : Expected + Actual
Background
Conte
Overlay
Background
Conte
Overlay
Actual opacity:
50%
Snapshot (no differences to highlight)
Background
Conte
Overlay
Gray 25x8 stack with three cascading cards. Red 'Card 1' at top-left, green 'Card 2' overlaps at row 3/col 7, blue 'Card 3' overlaps at row 5/col 13. Each card partially visible.
Expected
Card
1
Card
2
Card
3
Actual
Card
1
Card
2
Card
3
Overlay : Expected + Actual
Card
1
Card
2
Card
3
Card
1
Card
2
Card
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Card
1
Card
2
Card
3
Gray 20x5 stack with purple rounded border. Blue 'Bordered Stack' at top-left inside border. Border adds 1 cell each side.
Expected
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Actual
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Overlay : Expected + Actual
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Gray 20x6 stack with 1-cell padding. Blue 'Padded' inset by 1 cell from all edges, gray padding visible around content.
Snapshot (no differences to highlight)
Padded
Gray 22x7 stack with purple square border and 1-cell padding. Blue 'At origin' positioned at border-box origin, overlapping the border/padding area.
Expected
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Actual
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Overlay : Expected + Actual
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Gray column with three children stacked vertically. Red 'Header' at top, teal 20x4 stack with blue 'Stacked' in middle, orange 'Footer' at bottom.
Expected
Header
Stacked
Footer
Actual
Header
Stacked
Footer
Overlay : Expected + Actual
Header
Stacked
Footer
Header
Stacked
Footer
Actual opacity:
50%
Snapshot (no differences to highlight)
Header
Stacked
Footer
Gray row with three children side by side. Red 'Left' on left, teal 12x4 stack with blue 'Stack' in middle, orange 'Right' on right.
Expected
Left
Stack
Right
Overlay : Expected + Actual
Left
Stack
Right
Left
Stack
Right
Actual opacity:
50%
Snapshot (no differences to highlight)
Left
Stack
Right
Gray 25x8 outer stack. Red 15x5 inner stack at top-left with blue 'Inner Stack'. Green 'Outer' at bottom-right of outer stack.
Expected
Inner
Stack
Outer
Overlay : Expected + Actual
Inner
Stack
Outer
Inner
Stack
Outer
Actual opacity:
50%
Snapshot (no differences to highlight)
Inner
Stack
Outer
Gray 20x6 stack with center alignment. Blue 'Centered' at center (uses alignment). Red 'TR' at top-right corner, green 'BL' at bottom-left (positioned, ignore alignment).
Overlay : Expected + Actual
TR
Centered
BL
TR
Centered
BL
Actual opacity:
50%
Snapshot (no differences to highlight)
TR
Centered
BL
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
Full
Snapshot (no differences to highlight)
30%
70%
Snapshot (no differences to highlight)
60%
60%
Snapshot (no differences to highlight)
Auto
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
25%
25%
50%
Snapshot (no differences to highlight)
Fixed
50%
Snapshot (no differences to highlight)
30%
Flex
Snapshot (no differences to highlight)
50%
Auto
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
Header
Body
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50x50
Snapshot (no differences to highlight)
50%
15x5 column with gray square border (┌─┐│└─┘ characters). 'Square' text inside, inset by 1 cell.
Expected
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
Actual
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
Overlay : Expected + Actual
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
15x5 column with gray rounded border (╭─╮│╰─╯ characters). 'Rounded' text inside, corners are curved.
Expected
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
Actual
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
Overlay : Expected + Actual
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
15x5 column with gray double-line border (╔═╗║╚═╝ characters). 'Double' text inside.
Expected
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
Actual
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
Overlay : Expected + Actual
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
Actual opacity:
50%
Snapshot (no differences to highlight)
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
15x5 column with gray heavy/thick border (┏━┓┃┗━┛ characters). 'Heavy' text inside.
Expected
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
Actual
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
Overlay : Expected + Actual
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
Actual opacity:
50%
Snapshot (no differences to highlight)
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
15x5 column with gray ASCII border (+-+|+-+ characters). 'ASCII' text inside.
Expected
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
Actual
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
Overlay : Expected + Actual
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
Actual opacity:
50%
Snapshot (no differences to highlight)
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
20x5 column with square border. 'Title' text embedded in top border line. 'Content' inside.
Expected
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
Actual
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
Overlay : Expected + Actual
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
20x5 column with rounded border. 'Footer' text embedded in bottom border line. 'Body' inside.
Expected
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
Actual
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
Overlay : Expected + Actual
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
20x7 dark blue column with 2-cell padding on all sides. 'Padded' text inset by 2 cells from each edge.
Snapshot (no differences to highlight)
Padded
20x7 dark green column with asymmetric padding: top=1, right=3, bottom=1, left=2. 'Asymmetric' text offset accordingly.
Snapshot (no differences to highlight)
Asymmetric
20x7 dark red column with horizontal padding=3, vertical padding=1. 'XY Padding' text inset 3 from sides, 1 from top/bottom.
Snapshot (no differences to highlight)
XY
Padding
Dark blue outer column. Light purple 15x3 inner column with 1-cell margin on all sides. Gap between inner and outer visible.
Snapshot (no differences to highlight)
Margin
White text 'With Background' on purple background (RGB 100,50,150). Background extends to text width.
Overlay : Expected + Actual
With
Background
With
Background
Actual opacity:
50%
Snapshot (no differences to highlight)
With
Background
Overlay : Expected + Actual
G
r
a
d
i
e
n
t
G
r
a
d
i
e
n
t
Actual opacity:
50%
Snapshot (no differences to highlight)
G
r
a
d
i
e
n
t
Orange text 'Colored Text' (RGB 255,128,0) on black background.
Overlay : Expected + Actual
Colored
Text
Colored
Text
Actual opacity:
50%
Snapshot (no differences to highlight)
Colored
Text
White text 'Full Color' on blue background (RGB 0,100,200). Both foreground and background colors applied.
Snapshot (no differences to highlight)
Full
Color
White 'Bold Text' in bold weight at top-left on black background.
Snapshot (no differences to highlight)
Bold
Text
White 'Italic Text' in italic style at top-left on black background.
Snapshot (no differences to highlight)
Italic
Text
White 'Underlined Text' with single underline at top-left on black background.
Overlay : Expected + Actual
Underlined
Text
Underlined
Text
Actual opacity:
50%
Snapshot (no differences to highlight)
Underlined
Text
White 'Struck Text' with strikethrough line at top-left on black background.
Snapshot (no differences to highlight)
Struck
Text
White 'Combined' text in both bold and italic at top-left on black background.
Snapshot (no differences to highlight)
Combined
20x7 column with green rounded border. 'Boxed' text inset by border (1 cell) plus padding (1 cell) = 2 cells from each edge.
Expected
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
Actual
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
Overlay : Expected + Actual
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
25x9 column with gray square border, 'Window' title in top border, dark blue background. Orange bold 'Hello' text inset 2 cells (border+padding).
Expected
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Actual
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Overlay : Expected + Actual
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Single line with mixed colors: 'Red' in red, ' and ' in white, 'Blue' in blue. All on black background.
Overlay : Expected + Actual
Red
and
Blue
Red
and
Blue
Actual opacity:
50%
Snapshot (no differences to highlight)
Red
and
Blue
Single line with 'Important' in bold followed by ' text' in normal weight. White on black.
Overlay : Expected + Actual
Important
text
Important
text
Actual opacity:
50%
Snapshot (no differences to highlight)
Important
text
Single line with 'Emphasis' in italic followed by ' here' in normal style. White on black.
Overlay : Expected + Actual
Emphasis
here
Emphasis
here
Actual opacity:
50%
Snapshot (no differences to highlight)
Emphasis
here
Six text rows showing named colors. 'Red' in red on row 1, 'Green' in green on row 2, 'Blue' in blue on row 3, 'Yellow' in yellow on row 4, 'Magenta' in magenta on row 5, 'Cyan' in cyan on row 6.
Expected
Red
Green
Blue
Yellow
Magenta
Cyan
Actual
Red
Green
Blue
Yellow
Magenta
Cyan
Overlay : Expected + Actual
Red
Green
Blue
Yellow
Magenta
Cyan
Red
Green
Blue
Yellow
Magenta
Cyan
Actual opacity:
50%
Snapshot (no differences to highlight)
Red
Green
Blue
Yellow
Magenta
Cyan
Outer 25x10 column with blue rounded border. Inner column with red square border nested inside. 'Inner' text inside the inner border.
Expected
╭───────────────────────╮
│
┌─────────────────────┐
│
│
│
Inner
│
│
│
└─────────────────────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Actual
╭───────────────────────╮
│
┌─────────────────────┐
│
│
│
Inner
│
│
│
└─────────────────────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Overlay : Expected + Actual
╭───────────────────────╮
│
┌─────────────────────┐
│
│
│
Inner
│
│
│
└─────────────────────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
╭───────────────────────╮
│
┌─────────────────────┐
│
│
│
Inner
│
│
│
└─────────────────────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭───────────────────────╮
│
┌─────────────────────┐
│
│
│
Inner
│
│
│
└─────────────────────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Row with three colored letters: red 'A', green 'B', blue 'C' arranged horizontally from left to right.
Snapshot (no differences to highlight)
A
B
C
TextArea with wrapping enabled. First line on row 1, second line wraps to additional rows. Cursor at start.
Expected
First
line
Second
line
is
long
en
ough
to
wra
Actual
First
line
Second
line
is
long
en
ough
to
wra
Overlay : Expected + Actual
First
line
Second
line
is
long
en
ough
to
wra
First
line
Second
line
is
long
en
ough
to
wra
Actual opacity:
50%
Snapshot (no differences to highlight)
First
line
Second
line
is
long
en
ough
to
wra
TextArea with wrapping disabled. Long line scrolls horizontally so the cursor at the end is visible.
Snapshot (no differences to highlight)
789ABCDEF